<template>
    <div class="inventory-check-table">

        <div class="operation-bar">
            <router-link class="back-link" to="/main/xingzheng/gudingzichan">
                <el-button icon="el-icon-arrow-left">返回</el-button>
            </router-link>
            <el-button type="primary" icon="el-icon-check" @click="saveData">保存</el-button>
        </div>
        <div v-if="!isEditingYearMonth" @dblclick="startEditing">
            <h2 title="双击可修改">{{ year }}年{{ month }}月存货盘点表</h2>
        </div>
        <div v-else style="margin: 0px 0px 20px 0px;">
            <input style="width: 60px;" v-model="year" type="number" placeholder="年" />年
            <input style="width: 40px;" v-model="month" type="number" placeholder="月" />月存货盘点表
            <button @click="saveYearMonth">保存</button>
            <button @click="cancelEditing">取消</button>
        </div>
        <div style="display: flex; align-items: center; justify-content: space-between;width: 1200px;margin: 0 auto;">
            <div class="form-group">
                <label>事业部：</label>
                <input v-model="formData.department" type="text" />
            </div>
            <div class="form-group">
                <label>存放点：</label>
                <input v-model="formData.storageLocation" type="text" />
            </div>
            <div class="form-group">
                <label>P/O：</label>
                <input v-model="formData.po" type="text" />
            </div>
            <div class="form-group">
                <label>时间：</label>
                <input v-model="formData.time" type="text" />
            </div>
        </div>

        <span>
            <button @click="addItem">新增货物项</button>
            <button @click="deleteSelectedItems">删除选中项</button>
        </span>
        <div class="table-container">
            <table border="1">
                <thead>
                    <tr>
                        <th><input type="checkbox" v-model="selectAll" @change="toggleAllSelect" /></th>
                        <th>序号</th>
                        <th>品名</th>
                        <th>规格</th>
                        <th>单位</th>
                        <th>帐存数</th>
                        <th>借条</th>
                        <th>欠条</th>
                        <th>初盘数</th>
                        <th>差异数</th>
                        <th>复盘数</th>
                        <th>抽盘数</th>
                        <th>原因</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in inventoryList" :key="index">
                        <td><input type="checkbox" v-model="item.checked" @change="updateSelectAll" /></td>
                        <td>{{ item.serialNumber }}</td>
                        <td><input v-model="item.productName" type="text" /></td>
                        <td><input v-model="item.specification" type="text" /></td>
                        <td><input v-model="item.unit" type="text" /></td>
                        <td><input v-model="item.accountedQuantity" type="number" /></td>
                        <td><input v-model="item.借条" type="number" /></td>
                        <td><input v-model="item.欠条" type="number" /></td>
                        <td><input v-model="item.initialInventory" type="number" /></td>
                        <td><input v-model="item.differenceQuantity" type="number" /></td>
                        <td><input v-model="item.recheckInventory" type="number" /></td>
                        <td><input v-model="item.sampleInventory" type="number" /></td>
                        <td><input v-model="item.reason" type="text" /></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="notes">
            <p>说明：</p>
            <p>1、存放点是指仓库或生产车间，并加上“*栋*F”；</p>
            <p>2、有P/O的必须按P/O单独列示，没P/O的按品种列示；</p>
            <p>3、初盘数、复盘数、抽盘数为仓库、车间实存数，不含借、欠条，复盘、抽盘产生的借、欠条差异，在原因栏列示；</p>
            <p>4、数据不得更改，如有更改，必须有盘点负责人签字</p>
        </div>
        <div class="signatures">
            <div class="form-group">
                <label>盘点负责人：</label>
                <input v-model="formData.inventoryLeader" type="text" />
            </div>
            <div class="form-group">
                <label>抽盘：</label>
                <input v-model="formData.sampleChecker" type="text" />
            </div>
            <div class="form-group">
                <label>复盘：</label>
                <input v-model="formData.rechecker" type="text" />
            </div>
            <div class="form-group">
                <label>部门主管：</label>
                <input v-model="formData.departmentHead" type="text" />
            </div>
            <div class="form-group">
                <label>初盘：</label>
                <input v-model="formData.initialChecker" type="text" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            year: '',
            month: '',
            formData: {
                department: '',
                storageLocation: '',
                po: '',
                time: '',
                inventoryLeader: '',
                sampleChecker: '',
                rechecker: '',
                departmentHead: '',
                initialChecker: ''
            },
            inventoryList: [
                {
                    serialNumber: 1,
                    productName: '',
                    specification: '',
                    unit: '',
                    accountedQuantity: 0,
                    借条: 0,
                    欠条: 0,
                    initialInventory: 0,
                    differenceQuantity: 0,
                    recheckInventory: 0,
                    sampleInventory: 0,
                    reason: '',
                    checked: false
                }
            ],
            selectAll: false,
            isEditingYearMonth: false // 新增属性
        };
    },
    methods: {
        addItem() {
            const newItem = {
                serialNumber: this.inventoryList.length + 1,
                productName: '',
                specification: '',
                unit: '',
                accountedQuantity: 0,
                借条: 0,
                欠条: 0,
                initialInventory: 0,
                differenceQuantity: 0,
                recheckInventory: 0,
                sampleInventory: 0,
                reason: '',
                checked: false
            };
            this.inventoryList.push(newItem);
        },
        deleteSelectedItems() {
            this.inventoryList = this.inventoryList.filter(item => !item.checked);
            this.selectAll = false;
        },
        toggleAllSelect() {
            this.inventoryList.forEach(item => {
                item.checked = this.selectAll;
            });
        },
        updateSelectAll() {
            this.selectAll = this.inventoryList.every(item => item.checked);
        },
        saveData() {
            // 这里模拟向后端发送数据保存，实际需替换为真实接口
            const apiUrl = ''; // 
            const dataToSend = {
                ...this.formData,
                inventoryList: this.inventoryList
            };
            this.$axios
                .post(apiUrl, dataToSend)
                .then(response => {
                    console.log('保存成功', response.data);
                    alert('数据保存成功');
                })
                .catch(error => {
                    console.error('保存失败', error);
                    alert('数据保存失败，请检查');
                });
        },
        startEditing() {
            this.isEditingYearMonth = true;
        },
        saveYearMonth() {
            // 这里可以添加验证逻辑
            this.isEditingYearMonth = false;
        },
        cancelEditing() {
            this.isEditingYearMonth = false;
            // 如果需要恢复原始值，可以在这里添加逻辑
        }
    },
    created() {
        // 这里可以从本地存储或后端获取年月等初始数据
        const currentDate = new Date();
        this.year = currentDate.getFullYear();
        this.month = currentDate.getMonth() + 1;
    }
};
</script>
<style lang="scss" scoped>
.inventory-check-table {
    font-family: '宋体', sans-serif;
    height: 100vh;
}

.operation-bar {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 10px;
}

.signatures {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.table-container {
    max-width: 1200px;
    overflow-x: auto;
    margin: 0 auto;
    max-height: 200px;
    overflow: auto;

}

table {
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
}

button {
    margin-right: 10px;
    margin-top: 10px;
}

.notes {
    margin-top: 10px;

    p {
        width: 1200px;
        margin: 0 auto;
        text-align: left;
        line-height: 25px;
    }
}
</style>